<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/harmonise.css" type="text/css" />
<link rel="stylesheet" href="../css/base-groups.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../css/ie.css" />
<![endif]-->
<title>Flexible Rounded Corner Box Example | Chapter 4 | CSS Mastery </title>
</head>
<style type="text/css">
<!--
/* pretty stuff */

h2 {
	color: #94b767;
}

/* rounded corner box */

.box {
  width: 20em;
  background: url(img/bottom-left.gif) no-repeat left bottom;
}

.box-outer {
	background: url(img/bottom-right.gif) no-repeat right bottom;
	padding-bottom: 1px;
}

.box-inner {
	background: url(img/top-left.gif) no-repeat left top;
}

.box h2 {
  background: url(img/top-right.gif) no-repeat right top;
	padding-top: 1em;
}


.box h2, .box p {
	padding-left: 1em;
	padding-right: 1em;
}


-->
</style>
</head>

<body>
<h1>Flexible Rounded Corner Box Example</h1>

<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.<p>
</div>
</div>
</div>
</body>
</html>
